<template>
  <div>
    <BookInfo :info="info"></BookInfo>
    <CommentList :comments='comments'></CommentList>
    <div class="comments" v-if='showAdd'>
      <textarea v-model='comment'
          class='textarea'
          :maxlength='100'
          placeholder='请输入图书短评'></textarea>
      <div class='location'>
        地理位置：
        <switch color="#ea5a49" :checked='location' @change='getGei'></switch>
        <span class='text-primary'>{{location}}</span>
      </div>
      <div class='phone'>
        手机型号：
        <switch color="#ea5a49" :checked='phone' @change='getPhone'></switch>
        <span class='text-primary' >{{phone}}</span>
      </div>
      <button @click='addComment' class="btn">评论</button>
    </div>
    <div class='unlogin' v-else>未登录或已评论</div>
    <button class='btn' open-type='share'>分享</button>
  </div>
</template>
<script>
import {get, post, showModal} from '@/util'
import BookInfo from '@/components/BookInfo.vue'
import CommentList from '@/components/CommentList.vue'
export default {
  data () {
    return {
      bookid: '',
      info: {},
      location: '',
      phone: '',
      comment: '',
      userinfo: {},
      comments: []
    }
  },
  components: {
    BookInfo,
    CommentList
  },
  computed: {
    showAdd () {
      if (!this.userinfo.openId) {
        return false
      }
      // 评论列表查到自己的id
      if (this.comments.filter(v => v.openid === this.userinfo.openId).length) {
        return false
      }
      return true
    }
  },
  methods: {
    async addComment () {
      if (!this.comment) {
        return
      }
      // 评论内容 手机型号 地理位置 图书ID openid
      const data = {
        openid: this.userinfo.openId,
        comment: this.comment,
        phone: this.phone,
        location: this.location,
        bookid: this.bookid
      }
      try {
        await post('/weapp/addcomment', data)
        this.comment = ''
        this.getComments()
      } catch (e) {
        showModal('失败')
      }
    },
    async getComments () {
      const comments = await get('/weapp/commentlist', {bookid: this.bookid})
      this.comments = comments.data.data.list
    },
    async getDetail () {
      const info = await get('/weapp/bookdetail', {id: this.bookid})
      this.info = info.data.data
      wx.setNavigationBarTitle({
        title: this.info.title
      })
    },
    // 2ovZxj0O45yGEj5pBb2B4OE9nqlgvAKG
    // http://api.map.baidu.com/geocoder/v2/
    getGei (e) {
      const ak = '2ovZxj0O45yGEj5pBb2B4OE9nqlgvAKG'
      let url = 'http://api.map.baidu.com/geocoder/v2/'
      if (e.target.value) {
        wx.getLocation({
          success: geo => {
            wx.request({
              url,
              data: {
                location: `${geo.latitude},${geo.longitude}`,
                output: 'json',
                ak
              },
              method: 'GET',
              success: res => {
                if (res.data.status === 0) {
                  this.location = res.data.result.addressComponent.city
                } else {
                  this.location = '未知地理'
                }
              }
            })
          }
        })
      } else {
        this.location = ''
      }
    },
    getPhone (e) {
      if (e.target.value) {
        const phoneinfo = wx.getSystemInfoSync()
        this.phone = phoneinfo.model
      } else {
        this.phone = ''
      }
    }
  },
  mounted () {
    this.bookid = this.$root.$mp.query.id
    this.getDetail()
    this.getComments()
    const userinfo = wx.getStorageSync('userinfo')
    if (userinfo) {
      this.userinfo = userinfo
    }
  }
}
</script>
<style lang='scss'>
.unlogin{
  text-align:center;
  font-size:14px;
  padding:10px 0;
}
.comments{
  padding: 10rpx;
  .textarea{
    background:#eee;
    padding: 10rpx;
    width:730rpx;
    height:200rpx;
  }
  .location{
    margin-top: 10px;
  }
  .phone{
    margin-top: 10px;
  }
}
</style>
